<template>
  <div class="exam-page">
    <section class="empty0-section">
      <div>
        <div class="time">
          <span>15s</span>
        </div>
        <p class="time-tip">测试时间约5～8分钟</p>
        <p class="tip">{{tips}}</p>
        <div>
         <ul id="example-2">
           <li v-for="(item, index) in words" class="word_li">
             <div class="">{{ item.message }}</div>
           </li>
         </ul>
        </div>
        <a-button
          type="primary"
          class="live-btn"
          shape="round"
          @click="goExam()"
          >开始测试
        </a-button>
      </div>
    </section>
  </div>
</template>
<script>
  import Footer from "@/components/layout/Footer";
  import { mapState } from "vuex";
  const qs = require("querystring");

  export default {
    name: "exam",
    components: {
      Footer
    },
    data() {
      return {
        tips:'education',
        words: [
              { message: '目的地' },
              { message: '小心点' },
              { message: '教育' },
              { message: '位置' },
              { message: '眼睛' }
            ]
      };
    },
    computed: {
      ...mapState({
        userInfo: state => state.userInfo
      })
    },
    watch: {},
    methods: {
      goExam(){
        this.$router.push("/wordexam");
      }
    },
    created() {},
    mounted() {},
    beforeCreate() {},
    beforeMount() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {}
  };
  </script>
<style lang="less" scoped>
/* @import url(); 引入公共css类 */
.exam-page{
  min-height: calc(100vh - 70px);
  width: 100%;
  padding-top: 30px;
  background:#ffffff url(../../assets/yxp-bg.png) center / 100% 100% no-repeat;
  .empty0-section{
    margin: 0 auto;
    text-align: center;
    background: #FFFFFF;
    width: 50%;
    height: 770px;
    margin-left: 25%;
    border-radius: 10px;
    .time{
      width: 50px;
      height: 50px;
      border: 1px solid #27BFA3;
      border-radius: 50%;
      line-height: 50px;
      float: right;
      margin-top:40px;
      margin-right: 40px;
      span{
        font-size: 22px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #27BFA3;
      }
    }
    .time-tip{
      font-size: 22px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #27BFA3;
      padding-top: 126px;
    }
    .tip{
      font-size: 50px;
      font-family: PingFang SC;
      font-weight: 600;
      color: #27BFA3;
      margin-top: 23px;
      margin-bottom: 23px;
    }
    ul{
      padding-left: 0px;
    }
    .word_li{
      margin-bottom: 35px;
      line-height: 70px;
      list-style: none;
      font-size: 24px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333333;
      width: 12.5rem;
      margin: 0 auto;
      border-bottom: 1px solid #EEEEEE;
    }
    .live-btn{
      width: 216px;
      height: 54px;
      background: #F9A821;
      border-radius: 27px;
      font-size: 24px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
    }
  }
 }
</style>
